<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="任务编码" prop="taskNo">
        <el-input
          v-model="queryParams.taskNo"
          placeholder="请输入任务编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="queryParams['task.taskName']"
          placeholder="请输入任务名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="平台名称" prop="platformCompanyName" v-if="organizationType === 0">
        <el-input v-model="queryParams.platformCompanyName" placeholder="请输入平台名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="代理名称" prop="agentCompanyName"  v-if="organizationType === 0 || organizationType === 1 || organizationType === 3">
        <el-input v-model="queryParams.agentCompanyName" placeholder="请输入代理名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="税源名称" v-if="organizationType !== 3"  prop="taxCompanyName">
        <el-input v-model="queryParams.taxCompanyName" placeholder="请输入税源名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用工企业名称" label-width="100px" prop="merchantCompanyName" v-if="organizationType !== 4">
        <el-input v-model="queryParams.merchantCompanyName" placeholder="请输入用工企业名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
          <el-option label="初始化" :value="0" />
          <el-option label="审核中" :value="1" />
          <el-option label="审核成功" :value="2" />
          <el-option label="审核驳回" :value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="打款状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择打款状态" clearable>
          <el-option label="初始化" :value="0" />
          <el-option label="打款中" :value="1" />
          <el-option label="打款完成" :value="2" />
          <el-option label="打款驳回" :value="3" />
          <el-option label="打款部分完成" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否申请开票" prop="isInvoicing" label-width="100px">
        <el-select v-model="queryParams.isInvoicing" placeholder="请选择是否申请开票" clearable>
          <el-option label="未申请" :value="0" />
          <el-option label="待开票" :value="2" />
          <el-option label="已开票" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="打款时间" prop="transTime">
        <el-date-picker
          v-model="transTimeRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['transfer:payslip:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="payslipList" :summary-method="getSummaries" show-summary>
      <el-table-column label="任务编码" align="center" prop="task.taskNo" min-width="180" />
      <el-table-column label="任务名称" align="center" prop="taskName" min-width="180">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="handleDetail(row)">{{ row.task.taskName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="平台名称" v-if="organizationType === 0" show-overflow-tooltip width="200" align="center" prop="platformCompanyName" />
      <el-table-column label="代理名称" v-if="organizationType === 0 || organizationType === 1 || organizationType === 3" show-overflow-tooltip width="200" align="center" prop="agentCompanyName" />
      <el-table-column label="税源地名称" v-if="organizationType !== 3" show-overflow-tooltip width="200" align="center" prop="taxCompanyName" />
      <el-table-column label="用工企业名称" v-if="organizationType !== 4" show-overflow-tooltip width="200" align="center" prop="merchantCompanyName" />
      <el-table-column label="下发金额" align="center" prop="amount" min-width="120" :isStatistics="true">
        <template slot-scope="{ row }">
          {{row.amount}}元
        </template>
      </el-table-column>
      <el-table-column label="服务费" align="center" prop="serviceAmount" min-width="140">
        <template slot-scope="{ row }">
          {{row.serviceAmount}}元
        </template>
      </el-table-column>
      <el-table-column label="下发成功金额" align="center" prop="successAmount" min-width="140">
        <template slot-scope="{ row }">
          {{row.successAmount}}元
        </template>
      </el-table-column>
      <el-table-column label="下发成功服务费" align="center" prop="successMerchantAmount" min-width="140">
        <template slot-scope="{ row }">
          {{row.successMerchantAmount}}元
        </template>
      </el-table-column>
      <el-table-column label="打款人数" align="center" prop="totalNum" min-width="100">
        <template slot-scope="{ row }">
          {{row.totalNum}}人
        </template>
      </el-table-column>
      <el-table-column label="打款成功人数" align="center" prop="totalNum" min-width="120">
        <template slot-scope="{ row }">
          {{row.successNum}}人
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="type" width="90">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" type="success" v-if="row.task.type === 1">分包</el-tag>
          <el-tag style="cursor: pointer" v-else-if="row.task.type === 2">众包</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="auditStatus"  min-width="120">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" type="info" v-if="row.auditStatus === 0">初始化</el-tag>
          <el-tag style="cursor: pointer" type="warning" v-else-if="row.auditStatus === 1">审核中</el-tag>
          <el-tag style="cursor: pointer" v-else-if="row.auditStatus === 2">审核通过</el-tag>
          <el-popover
            placement="top-start"
            :width="300"
            trigger="click"
            v-else-if="row.auditStatus === 3"
            :content="row.auditReason">
            <template #reference>
              <el-tag style="cursor: pointer" slot="reference" type="danger">审核驳回</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column  label="打款状态" align="center" prop="status"  min-width="120">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" type="info" v-if="row.status === 0">初始化</el-tag>
          <el-tag style="cursor: pointer" type="warning" v-else-if="row.status === 1">打款中</el-tag>
          <el-tag style="cursor: pointer" v-else-if="row.status === 2">打款完成</el-tag>
          <el-tag style="cursor: pointer" type="warning" v-else-if="row.status === 4">打款部分完成</el-tag>
          <el-popover
            placement="top-start"
            :width="300"
            trigger="click"
            v-else-if="row.status === 3"
            :content="row.transFailReason">
            <template #reference>
              <el-tag style="cursor: pointer" slot="reference" type="danger">打款失败</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="是否申请开票" align="center" prop="isInvoicing" width="120">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" type="info" v-if="row.isInvoicing === 0">未申请</el-tag>
          <el-tag style="cursor: pointer" v-else-if="row.isInvoicing === 1">已开票</el-tag>
          <el-tag style="cursor: pointer" type="warning" v-else-if="row.isInvoicing === 2">待开票</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="auditTime" width="180"></el-table-column>
      <el-table-column label="打款时间" align="center" prop="transTime" width="180"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            :disabled="scope.row.auditStatus !== 1"-->
<!--            icon="el-icon-check"-->
<!--            @click="handleToExamine(scope.row)"-->
<!--            v-hasPermi="['ecs:payslip:toExamine']"-->
<!--          >审核</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-more-outline"
            @click="handleDetail(scope.row)"
            v-hasPermi="['transfer:payslip:query']"
          >详情</el-button>
          <!--          <el-button-->
          <!--            type="text"-->
          <!--            icon="el-icon-position"-->
          <!--            size="mini"-->
          <!--            :disabled="scope.row.auditStatus !== 2"-->
          <!--            v-hasPermi="['ecs:payslip:payment']"-->
          <!--            @click="handlePayment(scope.row)"-->
          <!--          >打款</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-drawer :wrapperClosable	="false" :close-on-press-escape="false" title="详情" @close="detailOpen=false" :visible.sync="detailOpen" size="80%" destroy-on-close append-to-body >
      <payslip-detail ref="detailRef" @close="handleClose" :payslipId="payslipId"></payslip-detail>
    </el-drawer>


  </div>
</template>

<script>
import store from "@/store";
import { listPayslip } from "@/api/transfer/payslip"
import PayslipDetail from "@/views/transfer/payslip/profile/detail.vue";

export default {
  name: "Payslip",
  components: {PayslipDetail},
  data() {
    return {
      loading: true,
      // 遮罩层
      showSearch: true,
      // 显示搜索条件
      total: 0,
      // 总条数
      payslipList: [],
      // 发放订单表格数据
      title: "",
      // 弹出层标题
      open: false,
      // 是否显示弹出层
      detailOpen:false,
      // 查询参数
      payslipId:null,
      transTimeRange:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        taskNo:null,
        isInvoicing:null,
        outBatchNo: null,
        auditStatus: null,
        'task.taskName':null,
        taxCompanyName:null,
        agentCompanyName:null,
        merchantCompanyName:null,
        platformCompanyName:null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      organizationType: store.getters.organizationType,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询发放订单列表 */
    getList() {
      this.loading = true
      listPayslip(this.addDateRange(this.queryParams, this.transTimeRange, 'TransTime')).then(response => {
        this.payslipList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
        }else if (column.property === "amount" || column.property === "serviceAmount" || column.property === "successAmount" || column.property === "successMerchantAmount") {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                const result = prev + curr;
                return parseFloat(result.toFixed(2));
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        }

      });

      return sums;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.transTimeRange = []
      this.queryParams["task.taskNo"] = null
      this.queryParams['task.taskName'] = null
      this.resetForm("queryForm")
      this.handleQuery()
    },

    handleDetail(row){
      this.detailOpen = true
      this.payslipId = row.payslipId
    },

    handleClose(val){
      if (val){
        this.getList()
      }
      this.detailOpen = false
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('transfer/payslip/export', {
        ...this.queryParams
      }, `发放订单_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
